<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <title>关键字输入提示</title>
  <style type="text/css">
      *{
          margin:0px;
          padding:0px;
      }
      body, button, input, select, textarea {
          font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
      }
      html, body {
          width: 100%;
          height: 100%;
          margin: 0px;
          padding: 0px;
      }
      #container {
          width: 100%;
          height: 80%;
      }
  </style>
  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization,place&&key=RD6BZ-KGRE3-VPT3H-3WFIY-WBF4E-ITFX6"></script>
  <script>

    function init(){

      var map = new qq.maps.Map(document.getElementById("container"),{
        center:  new qq.maps.LatLng(39.916527,116.397128),
        zoom: 13
      });
      //实例化自动完成
      var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
      var keyword = "";
      //调用Poi检索类。用于进行本地检索、周边检索等服务。
      var searchService = new qq.maps.SearchService({
        complete : function(results){
          if(results.type === "CITY_LIST") {
            searchService.setLocation(results.detail.cities[0].cityName);
            searchService.search(keyword);
            return;
          }
          var pois = results.detail.pois;
          var latlngBounds = new qq.maps.LatLngBounds();
          for(var i = 0,l = pois.length;i < l; i++){
            var poi = pois[i];
            latlngBounds.extend(poi.latLng);
            var marker = new qq.maps.Marker({
              map:map,
              position: poi.latLng
            });

            marker.setTitle(poi.name);
          }
          map.fitBounds(latlngBounds);
        }
      });
      //添加监听事件
      qq.maps.event.addListener(ap, "confirm", function(res){
        keyword = res.value;
        searchService.search(keyword);
      });
    }
  </script>
</head>
<body onload="init()">
<div id="container"></div>
<p style="margin:5px">
  <input style="width:200px;padding:3px 4px;" type="text" id="place" /> 输入地址，自动完成<br><br>
  库引用方法：<br>
  &lt;script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&<span style="color:red">libraries=place</span>"&lt;/script&gt;
</p>
</body>
</html>
